<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>排期管理</span>
    </div>
    <el-row :gutter="40">
      <el-col>
        <el-form inline size="mini">
          <el-form-item label="公众号">
            <el-select
              v-model="mpid"
              filterable
              placeholder="公众号"
              @change="getCalenderData">
              <el-option
                v-for="(item,index) in tencentList"
                :label="item.label"
                :key="index"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker
              v-model="time"
              type="month"
              :default-value="time"
              value-format="yyyy-MM"
              placeholder="选择月"
              @change="getCalenderData"/>
          </el-form-item>
        </el-form>
      </el-col>

      <!--排期图-->
      <el-card>
        <el-col :span="16" class="mb15">
          <pieChart
            :datas="datas"
            :range="[time]"
            :ad-place-list="adPlaceList"
            :color="color"
            class="calendar"
            height="700px"
            @onChartSelected="onChartSelected"
          />
        </el-col>

        <el-col :span="7" :pull="1">
          <el-card
            @click.native="orderDetails(item)"
            v-for="(item,index) in details"
            :key="index"
            class="cards">
            <div slot="header" :style="'color:'+item.color" class="title">
              <span style="flex:2">
                {{ item.ad_name }}---{{ item.ad_place_name }}
                <el-tag v-if="item.is_book" size='mini'>预订</el-tag>
              </span>
              <span style="flex:1">{{ item.publish_at }} </span>

            </div>
            <el-row class="items" type="flex" justify="space-between">
              <div class="subtitle">登记人:</div>
              <div>{{ item.fans_name }}</div>
            </el-row>
            <el-row class="items" type="flex" justify="space-between">
              <div class="subtitle">价格:</div>
              <div>{{ item.ad_price }}</div>
            </el-row>
            <el-row class="items" type="flex" justify="space-between">
              <div class="subtitle">备注:</div>
              <div>{{ item.remark }}</div>
            </el-row>
            <!--<el-row type="flex" justify="end">-->
              <!--<el-button size="mini" type="" @click="orderDetails(item)">查看详情</el-button>-->
            <!--</el-row>-->
          </el-card>
        </el-col>
      </el-card>
    </el-row>
  </el-card>
</template>

<script>
  import {mapGetters} from 'vuex'
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'
  import pieChart from '../../components/pieChart'
  import echarts from 'echarts'

  export default {
    name: 'Home',
    components: {UploadExcelComponent, pieChart},
    data() {
      const defaultTime = () => {
        return this.$parseTime(new Date(), '{y}-{m}')
      }
      const scatterData = this.getVirtulData(defaultTime())
      return {
        time: defaultTime(),
        mpid: '',

        color: [],
        datas: scatterData,
        tencentList: [],
        details: [],
        adPlaceList: [],

        timer: null,
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_info() {
        const obj = {};
        const nowTime = this.time;
        const startTime = new Date(nowTime)
        const endTime = new Date(new Date(startTime).getTime() + 31 * 24 * 3600 * 1000)

        obj.start_time = this.$parseTime(startTime, '{y}-{m}-{d}')
        obj.End_time = this.$parseTime(endTime, '{y}-{m}-{d}')
        obj.mp_id = this.mpid

        return obj
      }
    },
    watch: {
      filter_info(val) {
        console.log(1, val)
        clearTimeout(this.timer)
        this.timer = setTimeout(this.getOrderList, 0)
      },
      mpid(val) {
        this.getPlace(val)
      },
    },
    mounted() {
      // 获取公众号列表
      this.getTencentList()

    },
    methods: {
      getCalenderData(val) {

      },
      onChartSelected(val) {
        console.log(val);
        this.details = val
      },

      // 获取公众号列表
      getTencentList() {
        this.$get('action/WechatNumber/tree')
          .then(res => {
            const list = []
            if (res.data.WechatTree) {
              res.data.WechatTree.forEach(item => {
                list.push({
                  label: item.name,
                  value: item.id,
                })
              })
            }
            this.tencentList = list
            this.mpid = list[0].value
          })
      },

      // 获取公众号id对应位置
      getPlace(val) {
        const data = {mp_id: val}
        this.$post('action/WechatNumber/findplaces', data)
          .then(res => {
            this.adPlaceList = res.data.map(item => {
              return item.place_name
            })
            this.color = res.data.map(item => {
              return item.color
            })
            // this.getOrderList(this.time)
          })
      },

      // 获取订单
      getOrderList(time) {
        const loading = this.$loading()

        const datas = {...this.filter_info, rows: 100, type: 0}
        this.$get('action/WechatAdvs/dataGrid', datas)
          .then(res => {
            let list
            const data = res.data
            let result = []
            for (let i = 0; i < 31; i++) {
              result[i] = []
              this.adPlaceList.forEach((item, index) => {
                result[i][index] = {
                  name: item,
                  value: ''
                }
              })
            }
            data.list.forEach((item, index) => {
              const index1 = new Date(item.publish_at).getDate()
              this.adPlaceList.forEach((item2, index2) => {
                if (item.ad_place_name === item2) {
                  result[index1 - 1][index2] = {
                    name: item2,
                    value: 1,
                    key: item
                  }
                }
              })
            })
            // }
            const final = this.getVirtulData(this.time, result)
            this.datas = final
            this.details = res.data.list[0] && [res.data.list[0]];
            loading.close()
          })
      },

      // 创建假数据
      getVirtulData(times, item) {
        var date = +echarts.number.parseDate(times + '-01')
        var end = +echarts.number.parseDate(times + '-01') + 31 * 24 * 3600 * 1000
        var dayTime = 3600 * 24 * 1000
        var data = []
        for (var time = date, i = 0; time < end; time += dayTime, i++) {
          data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            1,
            item && item[i] || 0
          ])
        }
        return data
      },

      // 查看详情
      orderDetails(item) {
        console.log(item)
        this.$router.push({
          name: 'adv_order.order_info',
          query: {
            id: item.ad_id
          }
        })
      },

      // 获取一周第一天和最后一天
      showWeekFirstDay() {
        var Nowdate = new Date('2018-12-27')
        var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000)
        var M = Number(WeekFirstDay.getMonth()) + 1
        return WeekFirstDay.getYear() + '-' + M + '-' + WeekFirstDay.getDate()
      },
      showWeekLastDay() {
        var Nowdate = new Date('2018-12-27')
        var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000)
        var WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000)
        var M = Number(WeekLastDay.getMonth()) + 1
        return WeekLastDay.getYear() + '-' + M + '-' + WeekLastDay.getDate()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .title {

    display: flex;
    justify-content: space-around;
    align-items: center;

    span {
      flex: 1;
    }
  }


  .items + .items {
    margin-top: 5px;
  }

  .items {
    display: flex;
    width: 100%;

    .subtitle {
      display: flex;
      margin-left: 15px;
      flex: 1;
      padding-bottom: 5px;
      &:nth-last-child{
        padding-bottom:0
      }
    }

    .subtitle + div {
      flex: 4;
    }
  }

  .calendar {
    /*box-shadow: 0 0 5px 2px #ddd*/
    margin-top: -10px;
  }

  .cards {
    color: #35307b;
    cursor:pointer
  }

  .cards + .cards {
    margin-top: 20px;
  }
</style>
